<template>
	<div id="supplement">
		<el-breadcrumb separator-class="el-icon-arrow-right" style="margin: 15px 0">
			<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>版权存证证书订单</el-breadcrumb-item>
			<el-breadcrumb-item>填写创作意图及作品独创性</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="originality">
			<ul class="content">
				<li id="hr">
					<p>填写创作意图及作品独创性</p>
				</li>
				<li>
					请为作品补充填写对应得"创作意图"和"作品独创性"说明，我们将会以此内容为你生成《创作过程说明书》并将作品样本、身份证信息及根据你的作品基本信息生成的其他相关声明一同提交至中国版权保护中心进行审核。审核周期为7-10个工作日，请认证填写
				</li>
				<li>
					<span>作品名称：</span>
					<span v-text="product_name"></span>
				</li>
				<li>
					<span>作品类型：</span>
					<span v-text="product_types_list[product_types_list]"></span>
				</li>
				<li>
					<span>创作意图：</span>
					<el-input type="textarea" :rows="2" :minlength="30" :maxlength="500" placeholder="表述作品的写作意图，差U你工作动机等，30-500字。" @blur="product_purpose<30? contLength01=true:contLength01=false" v-model="product_purpose" style="margin-top: 15px">
					</el-input>
					<!--<span v-show="contLength01">创作意图描述文字太短，请大于30字</span>-->
				</li>
				<li>
					<span>作品独创性：</span>
					<el-input type="textarea" :rows="2" placeholder="可以表述该作品的思路概况，精彩情节的独特安排，也可以表达作品的叙事方式，写作风格等，30-500字" :minlength="30" :maxlength="500" @blur="product_originality<30? contLength02=true:contLength02=false" v-model="product_originality" style="margin-top: 15px">
					</el-input>
					<!--<span v-show="contLength02">作品独创性描述文字太短，请大于30字</span>-->
				</li>
				<li id="btn">
					<router-link to="/certificate">
						<el-button type="info">关闭</el-button>
					</router-link>
					<el-button type="primary" @click="submitS">提交</el-button>
				</li>
			</ul>

		</div>
	</div>
</template>

<script>
import { continuesubmit } from "@/api/index";
import { mapState, mapMutations } from "vuex";

export default {
    data() {
        return {
            textarea: "",
            product_name: sessionStorage.getItem("product_name"),
            product_types_list: sessionStorage.getItem("product_type"),
            product_purpose: "",
            product_originality: "",
            contLength01: false,
            contLength02: false,
            product_types_list: {
                "1": "文字",
                "2": "口述",
                "3": "音乐",
                "4": "喜剧",
                "5": "曲艺",
                "6": "舞蹈",
                "7": "杂技艺术",
                "8": "美术",
                "9": "建筑",
                "10": "摄影",
                "11": "模型",
                "12": "电影",
                "13": "电影和类似摄制电影方法创作的作品",
                "14": "工程设计图、产品设计图",
                "15": "地图、示意图",
                "16": "其它"
            }
        };
    },
	computed: {
		...mapState([
			'croUser',
		]),
	},
	methods: {
		...mapMutations([
			'OUT_LOGIN',
		]),
        submitS() {
            //          copyright/Index/continuesubmit?copyright_number=171027205&product_purpose=aaa&product_originality=bbb
            let userdel = {
                copyright_number: this.$route.query.copyright_number,
                product_purpose: this.product_purpose,
                product_originality: this.product_originality,
                user_id: this.croUser.user_id
            };
            continuesubmit(userdel).then(data => {
                if (data.data) {
                    this.$message({
                        type: "success",
                        message: "操作成功"
                    });
                    this.$router.push("/finish");
                } else {
                    this.$message({
                        type: "error",
                        message: data.msg
                    });
                }
            });
        }
    }
};
</script>
<style scoped lang="scss">
#supplement {
    width: 1200px;
    margin: 0 auto;
    .originality {
        width: 100%;
        background-color: #f9f9f9;
        /*border: 1px solid #ccc;*/
        margin-bottom: 20px;
    }
}

.content {
    padding: 15px 20px;
    & > li {
        margin: 15px;
        font-size: 15px;
        line-height: 1.5;
    }
    #hr {
        position: relative;
        top: 0;
        left: 0;
        height: 50px;
        border-top: 1px solid #c6c6c6;
        margin-top: 20px;
        font-size: 17px;
        & > p {
            position: relative;
            top: -17px;
            left: 0;
            width: 300px;
            height: 40px;
            line-height: 35px;
            text-align: center;
            border: 1px solid #c6c6c6;
            border-radius: 20px;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            margin: 0 auto;
            background: #fff;
        }
    }
    #btn {
        text-align: center;
    }
}
</style>
<style>
.el-textarea__inner {
    min-height: 150px !important;
}
</style>
